<template>
    <div class="animation2">
        <div ref="circle" class="circle">
            <div ref="semicircleFirst" :class="['circle-first' ,'right']" :style="`-webkit-transform:rotate(${deg}deg);`"></div>
            <div ref="semicircleSecond" :class="['circle-second', deg > 180 ? 'right' : 'left']"></div>
            <div ref="insideCircle" class="inside-circle">{{num}}</div>
            <div class="circle-text">{{ deg }}</div>
        </div>
        <div class="num" v-if="!isStop">剩余次数 {{this.allGroupNum - this.currentGrou - 1}}</div>
    </div>
</template>
<script>
export default {
    name: 'animation2',
    props: {
        allGroupNum: {
            type: Number,
            default() {
                return 3
            },
        },
        groupInfo: {
            type: Array,
            default() {
                return [
                    { duration: 4, msg: '鼻子吸气', centerBg: '#A8C6A0', edgeBg: '#7B8B6F' },
                    { duration: 7, msg: '让气充满全身', centerBg: '#FFDFA6', edgeBg: '#E4B273' },
                    { duration: 8, msg: '按打哈欠的方式吐气', centerBg: '#E3A2A2', edgeBg: '#B06161' }
                ]
            }
        },
        isStop: {
            type: Boolean,
            default() {
                return false
            }
        }
    },
    data() {
        return {
            deg: 0,
            num: 0,
            nowGroup: this.allGroupNum, // 当前组数
            currentGrou: 0, // 当前组数
            txt: '',
            promiseArr: [],
            degTimer: '', // 旋转角度定时器
            countDownTimer: '' // 倒计时定时器
        }
    },
    mounted() {
        if (this.isStop) return
        // this.start()

        var that = this
        var rander = function() {
            that.deg += 1.488
            if (that.deg > 360) {
                that.deg = 0
                that.$refs.semicircleSecond.style.background = '#7B8B6F'
            }
            if (that.deg > 180) that.$refs.semicircleSecond.style.background = '#A8C6A0'
            if (that.num <= 3) {
                requestAnimationFrame(rander)
            }else{
                clearInterval(time)
            }
            
        }
        requestAnimationFrame(rander)

        var time 
        clearInterval(time)
        time= setInterval(() => {
            this.num ++
            if (this.num == 4) {
                clearInterval(this.countDownTimer)
                return
            }        
        }, 1000);

    },
    watch: {
      isStop(val) {
        if (!val) {
            console.log('状态改变，开始动画2')
            this.start()
        }
      }  
    },
    methods: {
        start() {
            this.getPromiseArr()
            this.doPromise() 
        },
        // 旋转
        rotate(time, color) {
            console.log('时间：' + time + ' S')
            // 控制旋转
            this.deg = 0
            clearInterval(this.degTimer)
            this.degTimer = setInterval(()=> {
                if (this.deg === 360) { 
                    clearInterval(this.degTimer)
                    return
                } 
                if (this.deg == 180) {
                    this.$refs.semicircleSecond.style.background = color
                }
                this.deg++
            }, time * 1000 / 360)

            // 控制时间读秒
            this.num = time
            clearInterval(this.countDownTimer)
            this.countDownTimer = setInterval(() => {
                if (this.num == 0) {
                    clearInterval(this.countDownTimer)
                    return
                }
                this.num --
            }, 1000);
        },
        getPromiseArr() {
            for (let i in this.groupInfo) {   
                let promise = (()=> {
                    this.$refs.circle.style.background = this.groupInfo[i].centerBg
                    this.$refs.insideCircle.style.background = this.groupInfo[i].centerBg
                    this.$refs.semicircleFirst.style.background = this.groupInfo[i].edgeBg
                    this.$refs.semicircleSecond.style.background = this.groupInfo[i].edgeBg
                    let txt = this.groupInfo[i].msg
                    this.txt = txt
                    this.rotate(this.groupInfo[i].duration, this.groupInfo[i].centerBg)
                    return new Promise(resolve => {
                        setTimeout(()=>{ 
                            resolve(txt)
                        }, this.groupInfo[i].duration * 1000) 
                    })
                })
                this.promiseArr.push(promise)
            }
        },
        async doPromise() {
            const groupnum = this.allGroupNum
            var arr = []
            for (var i = 0; i < groupnum; i++) {
                arr = arr.concat(this.promiseArr)
            }
            console.log(arr)
            for (let p in arr) {
                this.currentGrou = parseInt(p / groupnum)
                console.log(await arr[p]())
            }
        },
        getTotalDuration() {
            return this.groupInfo.reduce((total, num)=> {
                if (total instanceof Object) {
                    return total.duration + num.duration
                } else if (!isNaN(total)){
                    return total + num.duration
                }
            })
        },
    },
    destroyed() {
        clearInterval(this.degTimer)
        clearInterval(this.countDownTimer)
    }
}
</script>
<style scoped>
    .num{
        position:absolute;
        top: 0;
        left: 0;
        font-size: 30px;
    }
    .animation2{
        height: 100%;
        width: 100%;
        display: flex;
        justify-items: center;
        align-items: center;
    }
    .circle{
        height: 500px;
        width: 500px;
        margin: auto;
        background: #A8C6A0;
        border-radius: 50%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        zoom: 0.5;
    }
    .circle-text{
        position: absolute;
        /* color:#fff; */
        font-size: 50px;
        bottom: -20%;
    }

    .left{
        clip:rect(0, 250px, auto, 0);   
    }
    .right {
        clip:rect(0, auto, auto, 250px);
    }

    
    
    .circle-first{
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background: #7B8B6F;
        position: absolute;
        z-index: 1
    }
    .circle-second{
        height: 100%;
        width: 100%;
        border-radius: 50%;
        position: absolute;
        background: #7B8B6F;
        z-index: 2;
    }

    /* 中心遮罩圆 */
    .inside-circle{
        height: 80%;
        width: 80%;
        background: #A8C6A0;
        border-radius: 50%;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 80px;
        color: #fff;
    }
</style>